﻿
@using TomNet.IMSC.Model.DbModels.Finance;
@{
    Layout = null;
    var entity = ViewData["entity"] as FinanceItems;
    var list = ViewData["select_parent"] as List<SelectListItem>;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/Css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/Css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="~/Content/Css/animate.css" rel="stylesheet">
    <link href="~/Content/Css/style.css?v=4.1.0" rel="stylesheet">
    <title>insert</title>
    <link href="~/Content/Css/plugins/bootstrap-fileinput/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <link href="~/Scripts/plugins/jcrop1902/css/jquery.Jcrop.min.css" rel="stylesheet" />
    <style>
        /*.row {
            margin: 0px 0px;
        }*/

        .form-group {
            min-height: 72px;
            margin-bottom: 0px;
        }

        .control-label {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="col-xs-12">
            <form class="form-horizontal m-t" id="mainForm">

                <input type="hidden" id="Id" name="Id" value="@entity.Id" />
                <input type="hidden" id="CreatedTime" name="CreatedTime" value="@entity.CreatedTime" />
                <input type="hidden" id="IsLocked" name="IsLocked" value="@entity.IsLocked" />
                <input type="hidden" id="IsDeleted" name="IsDeleted" value="@entity.IsDeleted" />
                <input type="hidden" id="State" name="State" value="@entity.State" />
                <input type="hidden" id="Masterplate" name="Masterplate" value="@entity.Masterplate" />

                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="col-xs-3 control-label" style="text-align: right;">名称：</label>
                        <div class="col-xs-8">
                            <input id="Name" name="Name" type="text" class="form-control" value="@entity.Name">
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>请填写金融名称</span>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="form-group row">
                        <label class="col-xs-3 control-label">父级名称：</label>
                        <div class="col-xs-8">
                            <select class="form-control" name="ParentId" id="ParentId">
                                @foreach (SelectListItem item in list)
                                {
                                    <option value='@item.Value' @(entity.ParentID.ToString().Equals(item.Value) ? "selected" : "")>@(item.Text)</option>
                                }
                            </select>


                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>请填写父级名称</span>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="col-xs-3 control-label">Icon图片：</label>
                        <div class="col-xs-8">
                            
                            @*<div class="row"></div>*@

                            <input class="col-xs-8 form-control" style="width:280px;" id="Icon" name="Icon" type="text" value="@entity.Icon" />
                            <input class="col-xs-2" type="file" name="file_data" id="txt_file" />


                            <div id="jcrop2" class="col-xs-12" style="display:none;margin-top:16px;">
                                <label class="row control-label pull-left" style="display:none;">标记剪切线，保证头像质量（正方形），点击上传文件</label>
                                <div class="row control-label pull-left">
                                    <img alt="" src="" id="cut-img" />
                                </div>
                            </div>

                            <input type="hidden" id="x" name="x" />
                            <input type="hidden" id="y" name="y" />
                            <input type="hidden" id="w" name="w" />
                            <input type="hidden" id="h" name="h" />



                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>请上传Icon图片</span>

                        </div>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="col-xs-3 control-label ">显示图片：</label>
                        <div class="col-xs-8">

                            <div class="row">
                                <img class="col-xs-3" id="showImg" src="~/images/icon/@entity.Icon" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-11">
                    <button id="submit" class="btn btn-primary pull-right" type="submit">
                        <i class="fa fa-check"></i>&nbsp;提&nbsp;交
                    </button>
                </div>
            </form>
        </div>
    </div>
    <!-- 全局js -->
    <script type="text/javascript" src="~/Scripts/jquery.min.js?v=2.1.4"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js?v=3.3.6"></script>

    <!-- jQuery Validation plugin javascript-->
    <script type="text/javascript" src="~/Scripts/plugins/validate/jquery.validate.min.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/validate/messages_zh.min.js"></script>
    <script type="text/javascript" src="~/Scripts/Extensions/ExtValidator.js"></script>

    <!-- layer javascript -->
    <script type="text/javascript" src="~/Scripts/plugins/layer/layer.min.js"></script>

    <!-- bootstrap-fileinput -->
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-fileinput/fileinput.min.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-fileinput/locales/zh.js"></script>
    <script src="~/Scripts/plugins/jcrop1902/js/jquery.Jcrop.min.js"></script>
    <script src="~/Scripts/plugins/jcrop1902/js/jquery.color.js"></script>
    @*<script src="~/Scripts/plugins/bootstrap-fileinput/fileinput.js"></script>*@

    <script>
        var realWidth;//真实的宽度
        var realHeight;//真实的高度

        $(function () {

            var img = $('#showImg');
            //这里做下说明，$("<img/>")这里是创建一个临时的img标签，类似js创建一个new Image()对象！
            $("<img/>").attr("src", $(img).attr("src")).load(function () {
                /*
                如果要获取图片的真实的宽度和高度有三点必须注意
                1、需要创建一个image对象：如这里的$("<img/>")
                2、指定图片的src路径
                3、一定要在图片加载完成后执行如.load()函数里执行
                */
                realWidth = this.width;
                realHeight = this.height;
                //如果真实的宽度大于浏览器的宽度就按照100%显示
                if (realWidth > 128 || realHeight > 128) {
                    console.log(realWidth + " == " + realHeight);
                    $(img).attr("title", "长度或宽度太大");
                    //$(img).css("width", "100%").css("height", "auto");
                }
                else {//如果小于浏览器的宽度按照原尺寸显示
                    //$(img).css("width", realWidth + 'px').css("height", realHeight + 'px');
                }
            });



            // validate signup form on keyup and submit
            var icon = "<i class='fa fa-times-circle'></i> ";
            var validator = $("#mainForm").validate({
                rules: {
                    Name: {
                        required: true,
                        minlength: 2
                    }
                },
                messages: {
                    Name: {
                        required: icon + "请输入名称",
                        minlength: icon + "名称必须两个字符以上"
                    }
                },
                submitHandler: function (form) {
                    //进行ajax传值
                    $.ajax({
                        url: "/Item/EditAsync",
                        type: "post",
                        dataType: "json",
                        data: $('#mainForm').serialize(),
                        success: function (data) {
                            //Info,Success,Warning,Error
                            var type = data.type;
                            if (type == 1) {
                                layer.msg(data.content, { icon: 6, time: 2000 },
                                    function () {
                                        var index = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(index);
                                    });

                            } else {
                                layer.msg(data.content, { icon: 5, time: 2000 });
                            }
                        }
                    });
                }
            });


        });


        var oFileInput;
        $(function () {
            oFileInput = new FileInput();
            oFileInput.Init("txt_file", "/Item/UploadImageAsync", getExtraData);
            // validate signup form on keyup and submit
            var icon = "<i class='fa fa-times-circle'></i> ";

            //$('#submit').attr('disabled', true);


            function getExtraData() {
                return {
                    isJcrop:"0",
                    sw: $('.jcrop-holder').css('width'),
                    sh: $('.jcrop-holder').css('height'),
                    x: $('#x').val(),
                    y: $('#y').val(),
                    w: $('#w').val(),
                    h: $('#h').val()
                }
            }
        });

        //初始化fileinput
        var FileInput = function () {
            var oFile = new Object();

            //初始化fileinput控件（第一次初始化）
            oFile.Init = function (ctrlName, uploadUrl, data) {
                var control = $('#' + ctrlName);


                //初始化上传控件的样式
                control.fileinput({
                    language: 'zh', //设置语言
                    uploadUrl: uploadUrl, //上传的地址
                    allowedFileExtensions: ['jpg', 'png', 'gif'],//接收的文件后缀
                    uploadExtraData: data,//上传时除了文件以外的其他额外数据
                    showUpload: true, //是否显示上传按钮
                    showCaption: false,//是否显示标题
                    browseClass: "btn btn-primary", //按钮样式
                    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                    showPreview: false,
                    showRemove: false,
                    dropZoneEnabled: false,//是否显示拖拽区域
                    required: true,
                    showUploadedThumbs: false,
                    //indicatorSuccess
                    maxFileCount: 1, //表示允许同时上传的最大文件个数
                    previewFileIconSettings: {
                        'jpg': '<i class="glyphicon glyphicon-picture"></i>',

                    },
                    maxImageWidth: 64,//图片的最大宽度
                    maxImageHeight: 64,//图片的最大高度
                    initialPreview: [ //预览图片的设置
                    @*"<img src='@(ViewBag.file_path+ViewBag.file_name)' class='file-preview-image' alt='肖像图片' title='肖像图片'>",*@
                    "",
                    @*],
                    initialPreviewConfig: [
                           {
                               caption: '@(ViewBag.file_name)', width: '120px', url: '/User/DeleteAvatar', key: @(ViewBag.avatar_id), extra: { id: @(ViewBag.avatar_id) }
                           }
                            //, {
                            //    caption: 'desert.jpg', width: '120px', url: 'http://localhost/avatar/delete', key: 100, extra: { id: 100 }
                            //}*@

                    ]
                });
                @*$('#PhotoId').val(@(ViewBag.avatar_id));
                $('#PhotoName').val('@(ViewBag.file_path + ViewBag.file_name)');*@

                //导入文件上传完成之后的事件
                control.on("fileuploaded", function (event, data, previewId, index) {

                    //console.log(data);
                    console.log('-------' + data + '|' + data.response.type);
                    var type = data.response.type;
                    if (type == 1) {
                        var obj = data.response.data;
                        console.log(data.response.data);



                        //$("#PhotoId").val(obj.id);//.html('<input type="hidden" id="PhotoId" name="PhotoId" value="'+pid+'" />')
                        $('#Icon').val(obj);
                        $('#jcrop2').hide();

                        $('#txt_file').attr('disabled', true)//上传成功 禁止再上传
                        $('#submit').attr('disabled', false);//提交按钮 解禁
                        //$('#submit').click();//提交按钮 解禁
                        //layer.msg(data.content, { icon: 6, time: 2000 },
                        //    function () {
                        //        var index = parent.layer.getFrameIndex(window.name);
                        //        parent.layer.close(index);
                        //    });

                    } else {
                        //layer.msg(data.content, { icon: 5, time: 2000 });
                    }

                });

                control.on('filepredelete', function (event, key) {
                    console.log('Key pre = ' + key);
                });
                control.on('filedeleted', function (event, key) {
                    console.log('Key = ' + key);
                    $('#submit').attr('disabled', true);
                });

                //control.on('change', showPreview);
                control.on('change', readURL);

            }

            return oFile;
        };

        var api;
        function readURL(efile) {
            var img = $('#cut-img');
            $('#jcrop2').show();
            if (this.files && this.files[0]) {
                //img.css('display','');
                var reader = new window.FileReader();
                reader.readAsDataURL(this.files[0]);
                reader.onload = function (e) {
                    img.removeAttr('src');
                    img.attr('src', e.target.result);
                    img.attr("width", "128px");
                    img.attr("height", "128px");
                    img.attr("title", "预览图片调整为128*128");
                    //$(img).css("width", "128px").css("height", "128px");
                    //img.Jcrop({
                    //    allowSelect: false,
                    //    setSelect: [0, 0, 64, 64],
                    //    handleSize: 10,
                    //    aspectRatio: 1,
                    //    minSize: [80, 80],
                    //    maxSize: [350, 350],
                    //    //getWidgetSize: function () {
                    //    //    return [350, 350];
                    //    //},
                    //    onSelect: updateCords
                    //}, function () {
                    //    api = this;
                    //});
                };

                if (api != undefined) {
                    api.destroy();
                }
            }
            function updateCords(obj) {
                $("#x").val(obj.x);
                $("#y").val(obj.y);
                $("#w").val(obj.w);
                $("#h").val(obj.h);
            }
        };

    </script>
</body>
</html>
